<!--用户登录  -->
<template>
    <div class="index">
        <div class="login">
            <div class="bg">
                <img src="../../assets/img/bg3.png" alt="">
            </div>
            <div class="userlogin">
                <div class="logintitle">管理员登录</div>  
                <div class="Admin"><router-link to="/">用户登录</router-link></div>
                <div>
                    <input type="text" placeholder="AdminUser" id="user">
                    <input type="text" placeholder="AdminPassword" id="pwd">
                </div>
                <button @click="AdminLogin">登录</button>
            </div>
        </div>
    </div>
    </template>
    
    <script>
    import { RouterLink } from 'vue-router';
    
    export default {
        data() {
            return {
                islogin:true,
            };
        },
        methods:{
            AdminLogin(){
                // if(this.islogin){
                    let user=document.querySelector("#user").value
                    let pwd=document.querySelector("#pwd").value
                    // console.log('用户名',user)
                    // console.log('密码',pwd)
                    var url=`http://localhost:3000/Adminlogin?uname=${user}&upwd=${pwd}`
                    this.axios.post(url).then(res=>{
                        // console.log('返回',res)
                        if(res.data.code==201){
                            alert("登录失败，请检查用户名或者密码")
                        }else{
                            alert("登录成功")
                            this.$router.push({
                              path:'/AdminHome/BookSet'
                             })
                        }
                    })
                // }
            }
        },
        //生命周期 - 创建完成（访问当前this实例）
        created() {
        },
        //生命周期 - 挂载完成（访问DOM元素）
        mounted() {
        },
        components: { RouterLink }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
    .index{
        width: 100%;
      height: 100vh;
      background: url("../../assets/img/bg3.png") center center no-repeat;
      background-size: 100% 100%;
      position: fixed;
    }
    .login{
        /* 注册登录框 */
        text-align: center;
        /* background-color: rgb(218, 198, 198); */
        width: 600px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: row;
    }
    .bg{
        /* 登录框背景 */
        width: 300px;
        height: 300px;
        background-color: rgb(77, 170, 67);
        
    }
    .bg img{
        /* 登录框背景图片 */
        width: 100%;
        height: 300px;
    }
    .bg div{
        /* 跳转注册页面框 */
    background-color: rgb(10, 105, 194);
    border-radius: 15px;
    width: 200px;
    padding: 5px;
    position: absolute;
    top: 135px;
    left: 50px;
    }
    .bg div a{
        /* 跳转注册页面按钮 */
        text-decoration: none;
        color: white;
        text-align: center;
        font-size: 10px;
    }
    .userlogin{
        /* 用户登录框 */
        width: 300px;
        height: 300px;
        background-color: rgb(248, 240, 240);
    }
    .userlogin .logintitle{
        /* 用户登录框标题 */
        font-size: 22px;
        color: rgb(3, 3, 3);
        height: 30px;
        margin: 10px 0;
        margin-top: 20px;
    }
    
    .userlogin .Admin{
        /* 管理员登录跳转框 */
        background-color: rgb(196, 244, 247);
        width: 80px;
        height: 25px;
        margin: auto;
        margin-bottom: 20px;
    }
    .userlogin .Admin a{
        /* 管理员跳转按钮 */
        text-decoration: none;
        font-size: 10px;
        padding: 5px;
    }
    .userlogin div input{
        /* 验证输入框 */
        width: 260px;
        height: 40px;
        border-radius: 5px;
        margin: 10px 5px;
    }
    .userlogin button{
        /* 登录按钮 */
        width: 160px;
        height: 40px;
        border-radius: 25px;
    }
    </style>